<script>
let MyChart = null;
function getRandomData(min, max) {
  return parseInt((max - min) * Math.random() + min)
}
function RenderChart(echartData) {
  if (MyChart) {
    MyChart.dispose();
    MyChart = null;
  }
  MyChart = echarts.init(document.getElementById('Section-id-3'));
  let bgColor = "#fff";
  let color = [
    "#5189F8"
  ];

  let xAxisData = echartData.map(v => v.name);
  let yAxisData1 = echartData.map(v => v.value);
  const hexToRgba = (hex, opacity) => {
    let rgbaColor = "";
    let reg = /^#[\da-f]{6}$/i;
    if (reg.test(hex)) {
      rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
        "0x" + hex.slice(3, 5)
      )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
    }
    return rgbaColor;
  }

  const option = {
    backgroundColor: bgColor,
    color: color,
    legend: {
      show: false
    },
    tooltip: {
    },
    grid: {
      top: 50,
      right: 50,
      bottom: 30,
      left: 20,
      containLabel: true
    },
    xAxis: [{
      type: "category",
      boundaryGap: false,
      axisLabel: {
        formatter: '{value}',
        textStyle: {
          fontFamily: 'ALIBABAPUHUI-REGU',
          color: "#333"
        }
      },
      axisLine: {
        lineStyle: {
          color: "#D9D9D9"
        }
      },
      data: xAxisData
    }],
    yAxis: [{
      type: "value",
      name: '温度: ℃',
      axisLabel: {
        textStyle: {
          fontFamily: 'ALIBABAPUHUI-REGU',
          color: "#666"
        }
      },
      nameTextStyle: {
        color: "#666",
        fontFamily: 'ALIBABAPUHUI-REGU',
        fontSize: 12,
        lineHeight: 40
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "#E9E9E9"
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    }],
    series: [{
      name: "一供（平均）温度",
      type: "line",
      smooth: true,
      symbolSize: 8,
      zlevel: 3,
      lineStyle: {
        normal: {
          color: color[0],
          shadowBlur: 3,
          shadowColor: hexToRgba(color[0], 0.5),
          shadowOffsetY: 8
        }
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [{
              offset: 0,
              color: hexToRgba(color[0], 0.3)
            },
            {
              offset: 1,
              color: hexToRgba(color[0], 0.1)
            }
            ],
            false
          ),
          shadowColor: hexToRgba(color[0], 0.1),
          shadowBlur: 10
        }
      },
      label: {
        show: true,
        position: 'top',
        fontWeight: 'bold',
      },
      data: yAxisData1
    }]
  };
  MyChart.setOption(option);
}
export default {
  name: "section-3",
  components: {
  },
  data() {
    return {
      // day week
      currentTab: 'day',
    };
  },
  computed: {
  },
  watch: {},
  mounted() {
    this.initData()
  },
  beforeUnmount() {
    if (MyChart) {
      MyChart.dispose();
      MyChart = null;
    }
  },
  methods: {
    initData() {
      let echartData = []
      if (this.currentTab === 'day') {
        echartData = [{
          name: "00:00",
          value: getRandomData(50, 60),
        },
        {
          name: "02:00",
          value: getRandomData(50, 60),
        },
        {
          name: "04:00",
          value: getRandomData(50, 60),
        },
        {
          name: "06:00",
          value: getRandomData(50, 60),
        },
        {
          name: "08:00",
          value: getRandomData(50, 60),
        },
        {
          name: "10:00",
          value: getRandomData(50, 60),
        },
        {
          name: "12:00",
          value: getRandomData(50, 60),
        },
        {
          name: "14:00",
          value: getRandomData(50, 60),
        },
        {
          name: "16:00",
          value: getRandomData(50, 60),
        },
        {
          name: "18:00",
          value: getRandomData(50, 60),
        },
        {
          name: "20:00",
          value: getRandomData(50, 60),
        },
        {
          name: "22:00",
          value: getRandomData(50, 60),
        }
        ];
      } else {
        echartData = [{
          name: "周一",
          value: getRandomData(50, 60),
        },
        {
          name: "周二",
          value: getRandomData(50, 60),
        },
        {
          name: "周三",
          value: getRandomData(50, 60),
        },
        {
          name: "周四",
          value: getRandomData(50, 60),
        },
        {
          name: "周五",
          value: getRandomData(50, 60),
        },
        {
          name: "周六",
          value: getRandomData(50, 60),
        },
        {
          name: "周天",
          value: getRandomData(50, 60),
        },
        ];
      }

      RenderChart(echartData)
    },
    refreshData() {
      this.initData();
    },
    switchTab(v) {
      this.currentTab = v;
      this.initData();
    }
  },
};
</script>

<template>
  <div class="main-card">
    <div class="main-header">
      <span class="main-title font-alimamashuheiti">
        一供（平均）温度趋势分析
      </span>
      <div class="main-function-area">
        <div class="tabs">
          <div class="tab" :class="[
            currentTab === 'day' ? 'active' : ''
          ]" @click="switchTab('day')">日趋势</div>
          <div class="tab" :class="[
            currentTab === 'week' ? 'active' : ''
          ]" @click="switchTab('week')">周趋势</div>
        </div>
        <el-icon @click="refreshData" class="cursor-pointer">
          <Refresh />
        </el-icon>
      </div>
    </div>
    <div id="Section-id-3">

    </div>
  </div>
</template>
<style></style>
<style lang="less">
.main-card {
  border: 1px solid #e4e7ed;
  border-radius: .3rem;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &>.main-header {
    font-size: 2rem;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &>.main-function-area {
      display: flex;
      align-items: center;

      &>.tabs {
        margin-right: 1rem;
        display: inline-flex;
        border-radius: .5rem;

        &>.tab {
          color: #000;
          cursor: pointer;
          padding: .2rem .5rem;
          font-size: 1.2rem;
          overflow: hidden;
          border: 1px solid #cdcdcd;

          &.active {
            color: rgba(81, 137, 248, 1);
            border-color: rgba(81, 137, 248, 1);
            background-color: rgba(81, 137, 248, .2);
          }

          &:nth-child(1) {
            border-top-left-radius: .4rem;
            border-bottom-left-radius: .4rem;
          }

          &:nth-child(2) {
            border-top-right-radius: .4rem;
            border-bottom-right-radius: .4rem;
          }
        }
      }
    }
  }
}

#Section-id-3 {
  min-height: 37rem;
}
</style>
